<template>
	<div class="useview allbgc">
		<div class="useview-top alltop">
			<span><router-link to='/my'><</router-link></span>
			<p>个人信息</p>
		</div>

		<!-- 展示箭头 -->
		<!-- <van-cell title="头像" is -link>
			<img round width="20px" height="20px" :src="userpic"> <template v-slot:error>加载失败</template></img>
		</van-cell> -->
		<div class="container">
			<input type="file" hidden id="file" accept="image/*" ref="file" @change="change">
			<!-- 点击头像 弹出弹框 选择图片 本地图片放上 -->
			<van-cell title="头像" is-link class="tx" center>
				<!-- 点击label标签 也会触发 它for的那个元素的点击 -->
				<label for="file">
					<van-image round fit="cover" :src="userInfo.avatar"/>
				</label>
			</van-cell>
			
			<van-cell title="昵称" is-link :to="{path:'/edit',query:{nickname:userInfo.nickname}}" :value="userInfo.nickname"/>
			
			<!-- 性别 -->
			<van-cell title="性别" @click="sexPickerShow=true" is-link :value="userInfo.sex||'请选择性别'" />
			<van-popup
			  v-model="sexPickerShow"
			  position="bottom"
			>
				<van-picker
				  title="请选择"
				  show-toolbar
				  :columns="sexColumns"
				  @confirm="sexPickerConfirm"
				  @cancel="sexPickerShow=false"
				  value-key="sex"
				/>
			</van-popup>
			
			<!-- 生日 -->
			<van-cell title="生日" is-link @click="datePickerShow=true" :value="userInfo.birthday||'请选择生日'" />
			<van-popup
			  v-model="datePickerShow"
			  position="bottom"
			>
				<van-datetime-picker
				  :value="userInfo.birthday?new Date(userInfo.birthday):new Date(2000,0,1)"
				  type="date"
				  title="选择年月日"
				  :min-date="minDate"
				  :max-date="maxDate"
				  @confirm="datePickerConfirm"
				  @cancel="datePickerShow=false"
				/>
			</van-popup>
			
			<div class="photo">
				<van-button round block type="primary" size="normal" :square="true" native-type="submit" @click="submit" color="#07c160" style="margin: 5% auto;">确定</van-button>
			</div>
		</div>
		
	</div>
</template>

<script>
	import {mapActions} from 'vuex';
	import {editUserInfo} from '../../api/user.js';
	import sexPickerMixin from './sexPickerMixin.js';
	import datePickerMixin from './datePickerMixin.js';
	
	export default{
		name:"userInfo",
		data(){
			return{
				// 和vuex里的userInfo不是一个  所以可以对它进行更改 从而不会影响vuex里的userInfo的值
				userInfo:{},
				
			};
		},
		// mixins混入 性别选择
		mixins:[sexPickerMixin,datePickerMixin],
		computed:{
			//方法1 这样写 会污染vuex的数据
			// userInfo(){
			// return this.$store.state.userInfo
			// }
		},
		watch:{
			// 方法3 监听数据 并进行数据回填
			//监听$store.state.userInfo
			// 数据无污染  刷新后也能拿到  解决了方法1 2 的问题
			'$store.state.userInfo':{
				// 数据只要变了 就说明 原来没登 现在登了
				immediate:true,//立刻监听
				handler(n,o){
					// handler(n,o)监听的这个函数 第一个参数是新的  第二个参数是老的
					this.userInfo=JSON.parse(JSON.stringify(n));//n表示this.$store.state.userInfo
					// console.log(this.userInfo)
				}
				
			},
			
		},
		methods:{
			...mapActions(['upload']),
			
			async change(e){
				console.log();//没有使用vant  把他封装成vant
				//FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob(是file文件的父类  二进制) 对象指定要读取的文件或数据。
				//其中 File 对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象，也可以来自拖放操作生成的 DataTransfer对象，还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。
				let file=e.target.files[0];//二进制 
				// 1.前端预览 转成base64
					// FileReader可以读取文件  
					
				// 前端预览图片的两个方案1.URL.createObjectURL()  2.FileReader  base64
				this.userInfo.file=file;
				let fileReader=new FileReader();
				fileReader.readAsDataURL(file);//开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL 格式的 Base64 字符串以表示所读取文件的内容。
				fileReader.onload=(e)=>{
					// 返回值是base64
					// console.log(e.target.result); //拿到base64的格式
					this.userInfo.avatar=e.target.result;
				};
				
			},
			async submit(){
				let {_id,nickname,avatar,file,sex='',birthday='',}=this.userInfo;
				if(file){
					// 证明咱们上传头像了
					let fileList=[{
						file,
					},];//和vant上传组件形状一样
					let res= await this.upload(fileList);
					avatar=res[0];
				}
				editUserInfo({
					uid:_id,nickname,avatar,sex,birthday,
				}).then((res)=>{
					console.log(res);
					console.log(nickname)
					// 更新成功后  需要返回 更新一下vuex里的数据
					// 最快方案  重新调接口
					
					// 改完数据后 未同步  的问题用if解决
					this.$toast(res.msg)
					if(res.code==0){
						// 通知服务器 数据已经更改
						// 但是本地的vuex数据还未更改  方案1.直接调接口(严谨 但浪费)this.$store.dispatch('getUserInfo',localStorage.getItem('token'))   方案2.直接在本地修改 对数据进行一次覆盖this.$store.commit('change',{key:'userInfo',value:{_id,nickname,avatar,sex,birthday,}})
						
						// 直接在本地修改
						// this.$store.commit('change',{key:'userInfo',value:{_id,nickname,avatar,sex,birthday,}})
						// 直接调接口
						this.$store.dispatch('getUserInfo',localStorage.getItem('token'))
						setTimeout(v=>{
							this.$router.back()
						},500)
					}
				})
			},
			
		},
		// created() {
		// 	// 数据回填
		// 	// 1.需要拿到 用户数据
		// 	// 2.把用户数据渲染到页面上
			
		// 	//方法2 created直接获取 问题是 刷新以后拿不到
		// 	// this.userInfo=JSON.parse(JSON.stringify(this.$store.state.userInfo));//深拷贝了一下vuex里的userInfo 
			
		// },
		
		mounted() {
			console.log(this.userInfo);
		},
		// 添加了 keep-alive以后mounted只会走一回  所以要把mounted里的代码移动到activated里面
		
		// 添加了 keep-alive以后又增加了两个生命周期钩子(激活activated,失活deactivated)  
		/*激活 :加了keep-alive以后,在页面的隐藏或者切换的过程中,不是销毁而是把他的虚拟dom放到了一个对象中间(相当于把他冰封 沉眠了)( activated在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用);
			1. beforeMount=>别的路由进来(destroyed/deactivated)=>
			2. mounted=> activated 进入缓存组件 => 执行 beforeRouteEnter回调
			因为组件被缓存了,再次进入缓存路由/组件时,不会触发这些钩子：beforeCreate ,created ,beforeMount ,mounted 。
			所以之后的调用时机是:组件销毁destroyed/或离开缓存deactivated => activated 进入当前缓存组件 => 执行 beforeRouteEnter回调*/
			
		/*失活 :组件被停用(离开路由)时调用,使用了keep-alive就不会调用beforeDestroy(组件销毁前钩子)和destroyed(组件销毁),因为组件没被销毁,被缓存起来了。
			这个钩子可以看作beforeDestroy的替代,如果你缓存了组件,要在组件销毁的时候做一些事情，你可以放在这个钩子里。
			如果你离开了路由，会依次触发:组件内的离开当前路由钩子beforeRouteLeave =>  路由前置守卫 beforeEach =>全局后置钩子afterEach => deactivated 离开缓存组件 => activated 进入缓存组件(如果你进入的也是缓存路由)
			// 如果离开的组件没有缓存的话 beforeDestroy会替换deactivated 
			// 如果进入的路由也没有缓存的话  全局后置钩子afterEach=>销毁 destroyed=> beforeCreate等*/
		activated(){
			//激活  当被缓存的组件 再次被打开时  他的加载时机比较晚  比mounted还要晚
				
			// 更改edit  昵称
			let nickname=sessionStorage.getItem('nickname')
			if(nickname){
				this.userInfo.nickname=nickname
			}
		},
		deactivated(){
			// 失活  当被缓存的组件 加入到缓存时 
			console.log("加入到缓存");
		}
	}
</script>

<style lang="less">
	.tx .van-cell__value{
		height: 40px;
		line-height: 40px;
	}
	.tx .van-cell__value .van-image__img,.tx .van-cell__value .van-image{
		width: 40px;
		height: 40px;
		line-height: 40px;
	}
	.tx .van-cell__title span{
		height: 40px;
		line-height: 40px;
		padding: 0;
	}
	.tx .van-cell__right-icon{
		line-height: 28px;
	}
</style>
